import React, { Component } from 'react';
import Header from './components/Header';
import Home from './components/Home';
import About from './components/About';
import Test from './components/Test';

import MyLink from './components/MyLink';
/* NavLink 可以做导航的路径，相比较Link组件来说，多了一些属性，比如activeClassName属性，就是当前路由被选中后，使用这个属性中的类型 */
import { Switch, Route } from 'react-router-dom';


export default class App extends Component {
    render() {
        return (
            <div>
                <Header />

                <div className="row">
                    <div className="col-xs-2 col-xs-offset-2">
                        <div className="list-group">
                            {/* 自己封装的路由连接组件 */}
                            {/* 当自定的组件是双标签使用的时候，内容是通过prop的children属性传递进去的 */}
                            <MyLink to='/about'>About</MyLink>
                            <MyLink to='home'>Home</MyLink>


                            {/*  <Link className="list-group-item active" to='/about' >About</Link>
                            <Link className="list-group-item" to='/home'>Home</Link> */}
                        </div>
                    </div>
                    <div className="col-xs-6">
                        <div className="panel">
                            <div className="panel-body">

                                {/* route标签是路由的切换实现，path属性是用来监听路径，然后路径匹配成功则加载对应的组件,component属性后跟当前要加载的组件 */}
                                {/* 默认来说第一次匹配路径成功，也会继续向下匹配，查看是否还有其他的同路径组件需要加载，如果有，则继续展示组件 */}
                                {/* 如果在根据路径查找组件的过程中，进入了一个Switch组件中，则查到之后，会立马退出当前的Switch组件，继续向下走 */}
                                <Switch>
                                    <Route path='/about' component={About} />
                                    <Route path='/home' component={Home} />
                                    <Route path='/home' component={Test} />
                                </Switch>
                            </div>
                        </div>
                    </div>
                </div>
            </div >
        )
    }
}
